<template>
  <div class="page-content">
    <Card title="" style="height:100%">
    <template slot="title">
      <img src="../../assets/images/logo.png" style="width: 200px;" alt="">
    </template>
    <span class="tip-title">请选择要登录的集团/门店</span>
    <div class="content-box">
      <div>
        <div v-for="(item, index) in data" :key="index" :class="item.isSelected?'item-cell-selected':'item-cell'" @click="onClickCell(item)">
          <!-- <template slots="label"> -->
            <div class="item">
              <!-- <img src="../../assets/images/check.png" class="item-img" alt="" v-if="item.isSelected" /> -->
              <img src="../../assets/images/company-icon.jpg" class="item-img" alt="" v-if="item.accountType == 'company'" />
              <span class="item-title">{{ item.storeName }}</span>
              <Button type="warning" size="small" class="select-btn">选择</Button>
            </div>
          <!-- </template> -->
        </div>
      </div>
    </div>
  </Card>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import { createMenuListWithStore, createMenuListWithCompany } from "@/libs/login";
import { loginMenu } from "@/api/loginMenu";
export default {
  name: "selectStore",
  data () {
    return {
      switchValue: true,
      data: [],
      accountType: this.$route.query.accountType
    }
  },
  methods: {
    ...mapActions(["switchAccountLoginType", "getMenuList"]),
    onClickCell(item) {
      let userId = item.userId || item.adminUserId || item.id;
      let accountType = item.accountType || this.accountType;

      window.Loading = this.$myLoading({ content: "正在切换账号登录…" });
      this.switchAccountLoginType({ accountType, userId })
        .then(res => {
          const { code, message } = res;
          if (code == 200) {
            item.isSelected = true;

            if (accountType == 'store') {
              this.loginWithStoreType(userId, item, this.data);
            } else {
              this.loginWithCompanyType(userId, item, this.data);
            }
          } else {
            window.Loading.close();
            this.$Message.error(message);
          }
        },
        reject => {
          window.Loading.close();
          if (reject.message == "Network Error") {
            this.$Message.error({ content: "服务器开小差了~", duration: 2000 });
          } else {
            this.$Message.error(reject.message);
          }
        }
        );
    },
    loginWithStoreType(userId, storeInfo) {
      loginMenu().then(res => {
        let storeMenuList = res.data.data;
        createMenuListWithStore(userId, storeInfo, storeMenuList);
        this.tohome();
      });
    },
    loginWithCompanyType(userId, storeInfo) {
      createMenuListWithCompany(userId, storeInfo);
      this.tohome();
    },
    tohome() {
      this.$router.push({
        name: this.$config.homeName
      }, () => {
        window.Loading.close();
      });
    }
  },
  mounted() {
    this.data = this.$store.state.storeInfo.storeList;
  }
};
</script>

<style scoped>
.page-content {
  display: block;
  position: relative;
  height: 100%;
}
.tip-title {
  display: block;
  color: darkgrey;
  font-size: 28px;
  margin: 10px 20% 0 20%;
}
.content-box {
  height: 400px;
  position: relative;
  margin: 35px 20% 0 20%;
  /* border: 1px solid rgb(192, 192, 192); */
  border-radius: 8px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #f3f;
}
.item-cell {
  display: block;
  position: relative;
  border-bottom: 1px solid #f5f5;
}
.item-cell-selected {
  display: block;
  position: relative;
  color: #2d8cf0;
  background: #f0faff;
  border-bottom: 1px solid #f8f8f9;
}
.item-cell:hover {
  background-color: #f8f8f9;
}
.item {
  height: 50px;
  display: block;
  width: 100%;
}
.item-img {
  position: absolute;
  width: 40px;
    height: 40px;
    margin: 0px;
}
.item-title {
  position: absolute;
  height: 100%;
  font-size: 18px;
  margin: 15px 0 0 50px;
  max-width: 80%;
}
.select-btn {
  position: relative;
  margin: 10px 0 0 93%;
}
</style>
